<template>

  <div id="logContainer">
    <div class="logContent">
      <div
          v-for="(line,i) in logShowLines"
          :key="i"
          class="logLine"
          v-html="line"
      >
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {logLines: [Array], logSearchKey: null},
  computed: {
    logShowLines() {
      if (this.logSearchKey != null && this.logSearchKey.length > 0) {
        let re = new RegExp(this.logSearchKey, "ig");
        var lines = [];
        for (let i = 0; i < this.logLines.length; i++) {
          var line = this.logLines[i];
          if (re.test(line)) {
            lines.push(
                line.replace(
                    re,
                    "<span style='background:yellow;color:#303133'>$&</span>"
                )
            );
          }
        }
        return lines;
      }
      return this.logLines;
    },
  },
  watch: {
    logShowLines: function () {
      this.$nextTick(function () {
        //这里写方法
        let logDiv = document.getElementById("logContainer");
        logDiv.scrollTop = logDiv.scrollHeight + 1000;
      });
    },
  },
};
</script>
<style scoped>
#logContainer {
  height: 100%;
  background: #303133;
  overflow: auto;
  padding: 10px;
}

#logContainer .logContent {
  height: 100%;
  width: 100%;
}

#logContainer .logLine {
  font-size: 10px;
  color: #f2f6fc;
  white-space: nowrap;
}
</style>